<template>
  <div class="content">
    <div class="headerBox">
      <div class="itemBox" @click="jumpTo('')" >
        <div class="itemMain">
          <div class="itemLeft">
            <span class="val">{{ info.total }}</span>
            <span class="name">商品总数</span>
          </div>
          <div class="itemRight color1">
            <img src="../../static/images/icon-3.png" alt="" />
          </div>
        </div>
        <div class="itemBottom color1">
          商品档案录入完成率{{ info.enRate }}%
        </div>
      </div>
      <div class="itemBox" @click="jumpTo('0')" >
        <div class="itemMain">
          <div class="itemLeft">
            <span class="val">{{ info.notTotal }}</span>
            <span class="name">未录入总数</span>
          </div>
          <div class="itemRight color2">
            <img src="../../static/images/icon-3.png" alt="" />
          </div>
        </div>
        <div class="itemBottom color2">未录入完成率{{ info.notRate }}%</div>
      </div>
      <div class="itemBox" @click="jumpTo('2')" >
        <div class="itemMain">
          <div class="itemLeft">
            <span class="val">{{ info.enTotal }}</span>
            <span class="name">完成录入的商品</span>
          </div>
          <div class="itemRight color3">
            <img src="../../static/images/icon-3.png" alt="" />
          </div>
        </div>
        <div class="itemBottom color3">录入占比{{ info.inputRate }}%</div>
      </div>
    </div>
    <div class="mainContent">
      <div class="chartsLeft">
        <div>
          <el-select
            v-model="region"
            style="width:100px;"
            @change="loadTypeEnRate(1)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in productCate"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="infoA" id="peerA"></div>
      </div>
      <div class="chartsRight">
        <el-select
          v-model="echartRegionselet"
          style="width:100px;"
          @change="loadTypeRate(2)"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="infoB" id="peerB"></div>
      </div>
      <!-- <div class="ExportBox">
        <span @click="productExport(0)">导出近三个月的数据</span>
        <span @click="productExport(1)">导出近半年的数据</span>
        <span @click="productExport(2)">导出近一年的数据</span>
      </div> -->
    </div>
    <div class="mainContent">
      <div class="chartsLeft">
        <div>
          <el-select
            v-model="timeRegion"
            style="width:100px;"
            @change="loadQueryTypeData(1)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in productCate"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="infoA" id="peerC"></div>
      </div>
      <div class="chartsRight">
        <el-select
          v-model="timeRegionselet"
          style="width:100px;"
          @change="loadQueryTypeRate(2)"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="infoB" id="peerD"></div>
      </div>
      <!-- <div class="ExportBox">
        <span @click="queryExport(0)">导出近三个月的数据</span>
        <span @click="queryExport(0)">导出近半年的数据</span>
        <span @click="queryExport(0)">导出近一年的数据</span>
      </div> -->
    </div>
  </div>
</template>

<script>
import Const from "../api/Const";
import { excelExport } from "../utils/utils";

export default {
  name: "shopDataGraph",
  data() {
    return {
      info: {
        enRate: 0,
        enTotal: 0,
        inputRate: 0,
        notRate: 0,
        notTotal: 0,
        total: 0
      },
      productCate: [],
      optionList: [],
      region: "",
      echartRegionselet: "",
      timeRegion: "",
      timeRegionselet: "",
      option: {
        title: {
          text: "档案完成率占比",
          // subtext: '纯属虚构',
          left: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "",
          left: "right"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: [
              // {value: 1048, name: '暂未录入'},
              // {value: 735, name: '部分录入'},
              // {value: 580, name: '录入完成'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      option1: {
        tooltip: {
          trigger: "axis"
          // axisPointer: {            // Use axis to trigger tooltip
          //     type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
          // }
        },
        legend: {
          data: ["录入完成", "部分录入", "暂未录入"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category"
          // data: ['武汉', '南昌', '广州']
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "录入完成",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            }
            // data: [320, 302, 301]
          },
          {
            name: "部分录入",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            }
            // data: [120, 132, 101]
          },
          {
            name: "暂未录入",
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            }
            // data: [220, 182, 191]
          }
        ]
      },
      option2: {
        title: {
          text: "各种类查询次数占比",
          // subtext: '纯属虚构',
          left: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "",
          left: "right"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: [
              // {value: 1048, name: '武汉',itemStyle: {color: '#000'}},
              // {value: 735, name: '南昌',itemStyle: {color: '#000'}},
              // {value: 1048, name: '武汉'},
              // {value: 735, name: '南昌'},
              // {value: 580, name: '深圳'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      option3: {
        xAxis: {
          type: "category"
          // data: ['武汉', '长沙', '深圳']
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            // data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar"
          }
        ]
      }
    };
  },
  created() {
    this.init();
  },
  methods: {

    jumpTo(val){
          this.$router.push({ path: '/admin/goodFileManagement' ,query:{recordType: val}});
    },
    
    async init() {
      await this.loadCityAndArea();
      this.loadTotalData();
      this.loadTypeEnRate(1);
      this.loadTypeRate(2);
      this.loadQueryTypeData(1);
      this.loadQueryTypeRate(2);
    },
    // 获取商品种类
    loadCityAndArea() {
      this.$axios.get(Const.api.productCurrUserType, {}).then(res => {
        const { data } = res.data;
        this.productCate = this.initSelect("value", "label", data.productCate);
        this.productCate = [
          ...[
            {
              label: "全部",
              value: ""
            }
          ],
          ...this.productCate
        ];
        this.optionList = this.initSelect("value", "label", data.productType);
        this.optionList = [
          ...[
            {
              label: "全部",
              value: ""
            }
          ],
          ...this.optionList
        ];
      });
    },
    // 获取商品信息
    loadTotalData() {
      this.$axios.get(Const.api.productTotalData, {}).then(res => {
        const { data } = res.data;
        this.info = data;
      });
    },
    // 获取商品完成度占比
    loadTypeEnRate(type) {
      this.$axios
        .get(Const.api.productTypeEnRate, {
          params: {
            type: type,
            name: this.region
          }
        })
        .then(res => {
          const { data } = res.data;
          this.option.series[0].data = [];
            this.option.series[0].data.push({
            value: data.total,
            name: "录入完成"
          });
          this.option.series[0].data.push({
            value: data.partTotal,
            name: "部分录入"
          });
 
       this.option.series[0].data.push({
            value: data.notTotal,
            name: "暂未录入"
          });
          let that = this;
          let myChart = that.$echarts.init(document.getElementById("peerA"));
          myChart.setOption(that.option);
        });
    },
    // 获取右侧完成占比
    loadTypeRate(type) {
      this.$axios
        .get(Const.api.productTypeRate, {
          params: {
            type: type,
            name: this.echartRegionselet
          }
        })
        .then(res => {
          const { data } = res.data;
          this.option1.xAxis.data = data.type;
          this.option1.series[0].data = data.totalRates;
          this.option1.series[1].data = data.partRates;
          this.option1.series[2].data = data.notTotalRates;
          let myChartB = this.$echarts.init(document.getElementById("peerB"));
          myChartB.setOption(this.option1);
        });
    },
    // 获取商品查询次数
    loadQueryTypeData(type) {
      this.$axios
        .get(Const.api.productQueryTypeData, {
          params: {
            type: type,
            name: this.timeRegion
          }
        })
        .then(res => {
          const { data } = res.data;
          this.option2.series[0].data = data;
          let myChartC = this.$echarts.init(document.getElementById("peerC"));
          myChartC.setOption(this.option2);
        });
    },
    // 获取商品查询次数占比
    loadQueryTypeRate(type) {
      this.$axios
        .get(Const.api.productQueryTypeData, {
          params: {
            type: type,
            name: this.timeRegionselet
          }
        })
        .then(res => {
          const { data } = res.data;
          let city = [];
          let valueData = [];
          for (const datum of data) {
            city.push(datum.name);
            valueData.push(datum.value);
          }

          this.option3.xAxis.data = city;
          this.option3.series[0].data = valueData;
          let myChartD = this.$echarts.init(document.getElementById("peerD"));
          myChartD.setOption(this.option3);
        });
    },
    // 商品数据导出
    productExport(type) {
      this.$axios({
        method: "GET",
        url: Const.api.productExport,
        responseType: "blob",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        params: {
          type: type
        }
      }).then(res => {
        excelExport(res.data, "商品统计.xls");
      });
    },
    // 查询次数数据导出
    queryExport(type) {
      this.$axios({
        method: "GET",
        url: Const.api.productQueryExport,
        responseType: "blob",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        params: {
          type: type
        }
      }).then(res => {
        excelExport(res.data, "查询统计.xls");
      });
    },
    initSelect(key, value, data) {
      let list = [];
      for (const datum of data) {
        let item = {
          label: datum,
          value: datum
        };
        list.push(item);
      }
      return list;
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  padding: 20px;
  display: flex;
  flex-direction: column;

  .headerBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .itemBox {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 150px;
      border-radius: 10px;
      margin-right: 20px;
      background-color: #fff;
      box-shadow: 0px 3px 8px 0px rgba(154, 161, 171, 0.1);
      overflow: hidden;

      .itemMain {
        min-width: 460px;
        padding: 20px 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .itemLeft {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .val {
            font-size: 24px;
            font-weight: bold;
            color: #333;
          }

          .name {
            margin-top: 10px;
            font-size: 16px;
            color: #666;
          }
        }

        .itemRight {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          // background-color: #def4fb;
          overflow: hidden;

          img {
            width: 50px;
            height: 50px;
          }
        }
      }

      .itemBottom {
        text-align: center;
        background-color: #def4fb;
        line-height: 30px;
        color: #333;
        font-size: 14px;
      }
    }
  }

  .mainContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;
    background-color: #fff;
    padding: 10px;
    //  height: 100px;
    box-shadow: 0px 3px 8px 0px rgba(154, 161, 171, 0.1);

    .chartsLeft {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .infoA {
        margin-top: 10px;
        width: 400px;
        height: 300px;
      }
    }

    .chartsRight {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      .infoB {
        margin-top: 10px;
        width: 900px;
        height: 300px;
      }
    }

    .ExportBox {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      span {
        margin-top: 10px;
        color: #78acff;
        cursor: pointer;
      }
    }
  }

  .color1 {
    background-color: #def4fb !important;
  }

  .color2 {
    background-color: #ffe9e2 !important;
  }

  .color3 {
    background-color: #def8eb !important;
  }
}
</style>
